import React, {Component} from 'react';
import {
  TouchableOpacity,
  StyleSheet, View, Text, Image, Dimensions,
  BackHandler,
  SafeAreaView,
  InteractionManager,
  NativeModules,
  DeviceEventEmitter,
  findNodeHandle,
  UIManager
} from 'react-native';
import {
  mainBgColorWhite,
  fontColorCoffee,
  fontColorLightGray,
  fontColorSecDeepGray,
  fontColorLightGreen,
  px2dp,
  isAndroid,
} from '../../../../common/styles/index';
import {Button, msg, Header, _, BackImage} from '../../../../common';
import {ScrollView} from 'react-native-gesture-handler';
import supply from '../../../../api/supply';
import px2wp from '../../../../common/utils/px2wp';

const Submit = Button.Submit;
/**
 * @author kanglang
 * @description 发货历史列表
 * @createDate 2020/7/27
 */

export default class LogisticsDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      queryType: '',
      dottes: [],
      dottes2: [],
      title: '',
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      pageNo: 1,
      pageSize: 6,
      hasMorePage: false,
      isLoading: false,
      statusObj: {},
      item: [],
      unitList: [],
      detail: {
        id: "",
        "addrBegin": {
          "province": "",
          "city": "",
          "district": "",
          "addressDetails": ""
        },
        "addrEnd": [
          {
            "province": "",
            "city": "",
            "district": "",
            "addressDetails": ""
          },
          {
            "province": "",
            "city": "",
            "district": "",
            "addressDetails": ""
          }
        ],
        "totalFar": "",    //距离
        "supplyName": "",    //货物名称
        "packagingType": "",     //包装方式
        "weight": "",    //重量
        "transportation": 1,    //运输方式  1.整车  2.零担
        "assembleTime": "",    //装货时间
        "assembleTimeLater": "",    //最迟装货时间
        "truckType": "",    //用车类型
        "truckLength": "",     //用车长度
        "remark": "",     //备注
        "freightAmountPer": '',    //期望价格  XXX元/吨
        "publishTime": "",   //发布时间
        "status": ''  //1  状态  1.调度中  2.已取消  3.已过期
      }
    }
  }

  componentDidMount() {
    if (Platform.OS == 'android') {
      BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
    this.init();
  }

  defaultMoney = '0.00'

  getHeight() {
    // this.layout(this.refs.foo).then(x=>{
    //     let height = parseInt(x.height/1.8)
    //     const dottes = [];
    //     for (let i = 0; i < height; i++) {
    //         dottes.push(i);
    //     }
    //     this.setState({dottes},()=>{
    //         console.log(dottes)
    //     })
    // })

    let height = parseInt(26 / 1.8)
    const dottes = [];
    for (let i = 0; i < height; i++) {
      dottes.push(i);
    }
    this.setState({dottes}, () => {
      console.log(dottes)
    })
  }

  //获取单位
  getUnitList = () => {
    supply.unitList().then(res => {
      this.setState({unitList: res.data})
    })
  }

  //转义单位
  matchingUnit(unit) {
    const {unitList} = this.state
    if (!unit || unitList.length === 0) {
      return '';
    }
    if (unitList.length > 0) {
      const unitName = unitList.filter(u => u.code === unit);
      if (unitName.length > 0) {
        return unitName[0].name;
      }
      return unit;
    }
    return unit;
  }

  layout(ref) {
    if (ref) {
      const handle = findNodeHandle(ref);
      return new Promise((resolve) => {
        UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
          resolve({x, y, width, height, pageX, pageY});
        });
      });
    } else {

    }

  }

  componentWillUnmount() {
    if (Platform.OS == 'android') {
      BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  // 返回
  _handleBack = () => {
    msg.emit('router: back');
    DeviceEventEmitter.emit('UPDATE_LOGISTICS', true)  //返回刷新
  }

  init = () => {
    const navigation = this.props.navigation;
    const state = navigation.state || {};
    const params = state.params || {};
    const {id, title, queryType, item} = params;
    this.setState({title, queryType, item})
    this.getHeight()
    this.getUnitList()
    this.supplyDetails(id);
    // setTimeout(()=>{
    //     this.getHeight()
    // },10)

  }

  supplyDetails = (id) => {
    supply.findBySourceId(id).then(res => {
      if (res.data) {
        this.setState({
          detail: res.data,
          // id: res.data.id,
          // ifCollect: res.data.ifCollect
        });

      }
    })
  }
  onBackAndroid = () => {
    this.xmHandleBack();
    return true
  }
  xmHandleBack = () => {
    msg.emit('router: back');
    DeviceEventEmitter.emit('UPDATE_LOGISTICS', true)
  }

  transportation = status => {
    switch (status) {
      case 1:
        return '整车';
      case 2:
        return '零担';
      case 3:
        return '快运';
    }
  }

  toSendGoods = () => {
    msg.emit('router: goToNext', {
      routeName: 'ReleaseSource',
      id: this.state.detail.id,
      type: 'resend'
    });
  }
  //修改信息
  editunc = (item) => {
    msg.emit('router: goToNext', {
      routeName: 'ReleaseSource',
      id: this.state.item.id,
      type: 'edit'
    });
  }
  toCreatOrder = () => {
    const {unitList} = this.state;
    msg.emit('router: refreshRoute', {
      routeName: 'CreatOrder',
    })
    msg.emit('router: goToNext', {
      routeName: 'CreatOrder',
      item: this.state.item,
      unitList: unitList
    });
  }

  cancel = () => {
    NativeModules.WindowModule.showWindow({content: '确定要取消货源吗？', leftStr: "不了"}, (e) => {
      if (e == 1) {
        InteractionManager.runAfterInteractions(() => {
          supply.cancelGoodsSource(this.state.detail.id).then(res => {
            if (res.success) {
              this.supplyDetails(this.state.detail.id)
            } else {
              NativeModules.WindowModule.showWindow({content: '取消失败,请稍后重试', onlyRightBtn: '1'}, (e) => {
              })
            }
          });
        })
      }
    })

  }
  cancelContract = () => {
    NativeModules.WindowModule.showWindow({content: '确定要取消吗？', leftStr: '暂不取消'}, (e) => {
      if (e == 1) {
        InteractionManager.runAfterInteractions(() => {
          supply.cancelContaract(this.state.detail.id).then(res => {
            if (res.success) {
              this.supplyDetails(this.state.detail.id)
            } else {
              NativeModules.WindowModule.showWindow({content: '取消失败,请稍后重试', onlyRightBtn: '1'}, (e) => {
              })
            }
          });
        })
      }
    })
  }
  handleFavorite = () => {
    const {ifCollect, id} = this.state;
    if (ifCollect == 1) {
      this.setState({ifCollect: 2});
      this.collectHandle(id, 2);
    } else if (ifCollect == 2) {
      this.setState({ifCollect: 1});
      this.collectHandle(id, 1);
    }
  }
  collectHandle = (id, state) => {
    const params = {id, state};
    supply.collectSupply(params).then(res => {
      if (res.success) {
        if (state == 1) {
          msg.emit('app:tip', {text: "已收藏，货源进入收藏状态"});
        } else if (state == 2) {
          msg.emit('app:tip', {text: "已取消收藏，货源进入未收藏状态"});
        }
      } else {
        if (state == 1) {
          msg.emit('app:tip', {text: "收藏失败"});
        } else if (state == 2) {
          msg.emit('app:tip', {text: "取消失败"});
        }
      }
    });
  }


  render() {
    const {detail, statusObj, ifCollect, title, dottes, queryType, arr, item} = this.state;
    const {installAddressList} = detail;

    // const carLongArr = detail.truckLength && detail.truckLength.split(',');
    const assembleTime = detail.assembleTime;
    const assembleTimeLater = detail.assembleTimeLater;
    const xhTime = assembleTime && assembleTimeLater && assembleTime.substring(5, 7) + "月" + assembleTime.substring(8, 10) + "日 " + assembleTime.substring(11, 16) + "-" + assembleTimeLater.substring(11, 16);
    const showFav = ifCollect == 1 ? true : false;

    //     const height = 6
    //    const dottesArr = [];
    //     for (let i = 0; i < height; i++) {
    //         dottesArr.push(i);
    //     }
    //     this.setState({dottes2:dottesArr})
    // let arr = [1,2,3,4,5]
    return (

      <SafeAreaView style={{flex: 1, backgroundColor: '#F5F5F5'}}>
        <Header
          title={title}
          renderLeft={() => this._renderLeft()}
        />
        <ScrollView>

          <View>
            <View ref="view" style={{backgroundColor: 'blue'}}>
            </View>
            <View style={styles.freightWrap}>
              <Text>运费：</Text>
              <Text>¥</Text>
              <Text
                style={styles.yfPrice}>{detail && detail.freightConsignorPer}/{detail && this.matchingUnit(detail.freightUnit)}</Text>
              {/* <Text>待签约</Text> */}
              {this.checkStatus(queryType, detail.status, detail.contractStatus)}
            </View>
            <View style={styles.adress}>
              <View style={styles.hTitle}>
                <Text style={{color: '#333232', fontSize: px2dp(16) * 2}}>装卸信息</Text>
              </View>
              {
                detail && detail.installAddressList && detail.installAddressList.map((v, i) => {
                  return (
                    <View style={styles.sourceWrap} key={i}>
                      <View>
                        <Image
                          style={styles.zhuangIcon}
                          source={require('../../../../image/icons/zhuang_icon.png')}
                          resizeMode="stretch"
                        />
                        <View style={styles.line}>
                          {
                            dottes.map(() => {
                              return <Text style={styles.dash}></Text>;
                            })
                          }
                        </View>
                        <View style={styles.line}>
                          {
                            arr.map((v) => {
                              return <Text style={styles.dash}></Text>
                            })
                          }
                        </View>
                      </View>
                      <View>
                        <Text style={styles.adressName}>{v.city}{v.district}{v.addressDetails}</Text>
                        <View ref="foo" style={styles.guigeWrap}>
                          <Text style={styles.goo}>{v.linkMan} {v.linkMobile}</Text>
                          <Text style={[styles.goo, styles.zTime]}>{v.loadingStartTime}-{v.loadingEndTime} 可装货</Text>
                        </View>
                        {
                          v.lat && v.lgt ? this.calDiatance(v.lat, v.lgt, v.lat[i + 1], v.lgt[i + 1], i) : null
                        }
                      </View>
                    </View>
                  );
                })
              }
              {
                detail && detail.offAddressList && detail.offAddressList.map((v, i) => {
                  return (
                    <View style={[styles.sourceWrap]} key={i}>

                      <View>
                        <Image
                          style={styles.zhuangIcon}
                          source={require('../../../../image/icons/xie_icon.png')}
                          resizeMode="stretch"
                        />
                        {
                          i === detail.offAddressList.length - 1 ? (<></>) : (
                            <>
                              <View style={styles.line}>
                                {
                                  dottes.map(() => {
                                    return <Text style={styles.dash}></Text>;
                                  })
                                }
                              </View>
                              <View style={[styles.line]}>
                                {
                                  arr.map(() => {
                                    return <Text style={styles.dash}></Text>;
                                  })
                                }
                              </View>
                            </>
                          )
                        }
                      </View>


                      <View>
                        <Text style={styles.adressName}>{v.city}{v.district}{v.addressDetails}</Text>
                        <View ref="foo" style={styles.guigeWrap}>
                          <Text style={styles.goo}>{v.linkMan} {v.linkMobile}</Text>
                        </View>
                        {
                          v.lat && v.lgt ? this.calDiatance2(v.lat, v.lgt, v.lat[i + 1], v.lgt[i + 1], i) : null
                        }
                      </View>
                    </View>
                  );
                })
              }

            </View>

            <View style={styles.detailsItem}>
              <View style={styles.hTitle}>
                <Text>货物信息</Text>
              </View>
              <View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>货物:</Text>
                  <Text style={styles.itemValue}>{detail.goodsTypeName}</Text>
                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>包装:</Text>
                  <Text style={styles.itemValue}>{detail.packagingTypeName}</Text>
                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>限期:</Text>
                  {
                    detail.isLimitDate == 2 ?
                      (
                        <Text style={styles.itemValue}>无限期</Text>

                      ) :
                      (
                        <Text
                          style={styles.itemValue}>{detail.invalidTimeStartStr && detail.invalidTimeStartStr.substr(0, 10)} 至 {detail.invalidTimeEndStr && detail.invalidTimeEndStr.substr(0, 10)}</Text>
                      )
                  }

                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>限量:</Text>
                  {
                    detail.isLimitWeight == 2 ? <Text style={styles.itemValue}>无限量</Text> :
                      (
                        queryType == 1 ?
                          <Text style={styles.itemValue}>{detail.weight}{this.matchingUnit(detail.weightUnit)}</Text>
                          : <Text
                            style={styles.itemValue}>{detail.remainWeight + '/' + detail.weight}{this.matchingUnit(detail.weightUnit)}</Text>
                      )
                  }

                </View>
              </View>
            </View>

            <View style={styles.detailsItem}>
              <View style={styles.hTitle}>
                <Text>车辆信息</Text>
              </View>
              <View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>用车类型:</Text>
                  <Text style={styles.itemValue}>{this.transportation(detail.transportationType)}</Text>
                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>车型:</Text>
                  <Text style={styles.itemValue}>{detail.truckTypes}</Text>
                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>车长:</Text>
                  <View style={styles.carLongWrap}>
                    <Text style={styles.itemValue}>{detail.truckLengths}</Text>
                    {/* {
                                            carLongArr.length > 0 && carLongArr.map((item, index) => {
                                                return (
                                                    <Text style={styles.carLongValue}>{item}米{index != carLongArr.length - 1 ? ',' : ''}</Text>
                                                )
                                            })
                                        } */}
                  </View>

                </View>
              </View>
            </View>

            <View style={styles.detailsItem}>
              <View style={styles.hTitle}>
                <Text>期望运费</Text>
              </View>
              <View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>运费:</Text>
                  {/* <Text style={styles.itemValue}>{this.transportation(detail.freightConsignorPer)}</Text> */}
                  <Text
                    style={styles.itemValue}>{`${detail.freightConsignorPer || this.defaultMoney}`}元/{this.matchingUnit(detail.freightUnit)}</Text>
                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>信息费:</Text>
                  <Text style={styles.itemValue}>{`${detail.messageCost || this.defaultMoney}元`}</Text>
                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>损耗费:</Text>
                  <View style={styles.carLongWrap}>
                    <Text
                      style={styles.carLongValue}>{`${detail.lossesAmount || this.defaultMoney}`}元/{this.matchingUnit(detail.lossesUnit)}</Text>
                    {/* {
                                            carLongArr.length > 0 && carLongArr.map((item, index) => {
                                                return (
                                                    <Text style={styles.carLongValue}>{item}米{index != carLongArr.length - 1 ? ',' : ''}</Text>
                                                )
                                            })
                                        } */}
                  </View>

                </View>
              </View>
            </View>

            <View style={[styles.detailsItem, {marginBottom: px2dp(200)}]}>
              <View style={styles.hTitle}>
                <Text>其他信息</Text>
              </View>
              <View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>回单:</Text>
                  <Text style={styles.itemValue}>{detail.needReceipt === 1 ? '需上传回单' : '无回单'}</Text>
                </View>
                <View style={styles.hItem}>
                  <Text style={styles.itemLabel}>备注:</Text>
                  <Text style={styles.itemValue}>{title === '合同详情' ? detail.contractRemark : detail.remark}</Text>
                </View>
              </View>
            </View>
          </View>


        </ScrollView>

        <View style={styles.botTab}>
          <View style={{flex: 1}}></View>
          {this.checkBtn(queryType, detail.status)}
        </View>
        <View style={styles.bot}></View>

      </SafeAreaView>
    );
  }

  calDiatance(lat1, lng1, lat2, lng2, i) {
    if (!lat1 || !lng1 || !lat2 || !lng2) {
      return <></>;
    }
    let installAddressList = this.state.detail.installAddressList
    let offAddressList = this.state.detail.offAddressList

    if (i == installAddressList.length - 1) {
      return <Text
        style={styles.distance}>{_.getDistance(lat1, lng1, offAddressList[0].lat, offAddressList[0].lgt)}公里</Text>;
    }
    return <Text style={styles.distance}>{_.getDistance(lat1, lng1, lat2, lng2)}公里</Text>;
  }

  calDiatance2(lat1, lng1, lat2, lng2, i) {
    if (!lat1 || !lng1 || !lat2 || !lng2) {
      return <></>;
    }
    let installAddressList = this.state.detail.installAddressList
    let offAddressList = this.state.detail.offAddressList

    if (i == offAddressList.length - 1) {
      return <></>;
      // return <Text style={styles.distance}>{_.getDistance(lat1, lng1, offAddressList[0].lat, offAddressList[0].lgt)}公里</Text>;
    }
    return <Text style={styles.distance}>{_.getDistance(lat1, lng1, lat2, lng2)}公里</Text>;
  }

  checkStatus = (queryType, status, contractStatus) => {
    // 货源状态  1.待签约 2.已签约 3已取消 4已过期 -1.禁用
    if (queryType == 1) {
      if (status == 1) {
        return <Text style={styles.qianyue}>待签约</Text>
      } else if (status == 3) {
        return <Text style={styles.fooStatus}>已取消</Text>
      } else if (status == 4) {
        return <Text style={styles.fooStatus}>已过期</Text>
      }
    } else if (queryType == 2) {
      // 合同状态 1进行中 2完成 3到期
      if (contractStatus == 1) {
        return <Text style={styles.gooStatus}>进行中</Text>
      } else if (contractStatus == 2) {
        return <Text style={styles.fooStatus}>已完成</Text>
      } else if (contractStatus == 3) {
        return <Text style={styles.fooStatus}>已到期</Text>
      } else if (contractStatus == 4) {
        return <Text style={styles.fooStatus}>已取消</Text>
      }
    }
  }

  checkBtn = (queryType, status) => {
    // 货源状态  1.待签约 2.已签约 3已取消 4已过期 -1.禁用
    if (queryType == 1) {
      if (status == 1) {
        return (
          <View style={{flexDirection: 'row'}}>
            <Submit
              text="取消"
              boxStyle={{
                width: px2dp(170),
                height: px2dp(60),
                borderRadius: px2dp(10),
                borderColor: fontColorLightGray,
                borderWidth: px2dp(1),
                backgroundColor: '#ffffff',
                marginRight: px2dp(20)
              }}
              btnTextStyle={{
                color: fontColorSecDeepGray
              }}
              onClick={() => {
                this.cancel();
              }}
            />
            <Submit
              text="修改信息"
              boxStyle={{
                width: px2dp(170),
                height: px2dp(60),
                borderRadius: px2dp(10)
              }}
              onClick={() => {
                this.editunc();
              }}
            />
          </View>
        )
      } else if (status == 3 || status == 4) {
        return (
          <Submit
            text="快速重发"
            boxStyle={{
              width: px2dp(170),
              height: px2dp(60),
              borderRadius: px2dp(10)
            }}
            onClick={() => {
              this.toSendGoods();
            }}
          />
        )
      }

    } else if (queryType == 2) {
      // 合同状态 1进行中 2完成 3到期
      const {detail} = this.state;
      if (detail.contractStatus == 1) {
        return (
          <View style={{flexDirection: 'row'}}>
            <Submit
              text="取消"
              boxStyle={{
                width: px2dp(170),
                height: px2dp(60),
                borderRadius: px2dp(10),
                borderColor: fontColorLightGray,
                borderWidth: px2dp(1),
                backgroundColor: '#ffffff',
                marginRight: px2dp(20)
              }}
              btnTextStyle={{
                color: fontColorSecDeepGray
              }}
              onClick={() => {
                this.cancelContract();
              }}
            />
            <Submit
              text="创建订单"
              boxStyle={{
                width: px2dp(170),
                height: px2dp(60),
                borderRadius: px2dp(10)
              }}
              onClick={() => {
                this.toCreatOrder();
              }}
            />
          </View>
        )
      } else if (detail.contractStatus == 2 || detail.contractStatus == 3) {
        return (
          <Submit
            text="快速重发"
            boxStyle={{
              width: px2dp(170),
              height: px2dp(60),
              borderRadius: px2dp(10)
            }}
            onClick={() => {
              this.toSendGoods();
            }}
          />
        )
      }
    }
  }

  _renderLeft = () => {
    return (
      <TouchableOpacity
        activeOpacity={0.8}
        style={isAndroid ? {paddingVertical:px2dp(14),paddingHorizontal:px2dp(40)}:
                  {paddingVertical:px2dp(14),paddingRight:px2dp(40)}}
        onPress={() => {
          msg.emit('router: back');
        }}>
        <BackImage/>
      </TouchableOpacity>
    );
  }

}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    height: Dimensions.get('window').height
  },
  freightWrap: {
    height: px2dp(88),
    lineHeight: px2dp(88),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: mainBgColorWhite,
    paddingLeft: px2dp(20),
    paddingRight: px2dp(20),
    // padding:px2dp(20),
    // marginBottom:px2dp(20),
    // marginTop:px2dp(20),
    margin: px2dp(20),
    borderRadius: px2dp(20),
  },
  yfPrice: {
    flex: 1
  },
  headerWrap: {
    backgroundColor: '#ffffff',
    borderColor: '#e5e5e5',
    ..._.ifIphoneX({top: 40}, isAndroid ? {top: 0} : {top: 20})
  },
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    color: '#999896'
  },

  backImg: {
    width: px2dp(36),
    height: px2dp(36),
    marginLeft: px2dp(24),
  },
  ddStatus: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  adress: {
    backgroundColor: '#fff',
    borderRadius: px2dp(20),
    marginLeft: px2dp(20),
    marginRight: px2dp(20),
    padding: px2dp(20)
  },
  detailsItem: {
    backgroundColor: '#fff',
    borderRadius: px2dp(20),
    marginLeft: px2dp(20),
    marginRight: px2dp(20),
    marginTop: px2dp(20),
    paddingLeft: px2dp(20),
    paddingRight: px2dp(20),
    paddingTop: px2dp(20),
    paddingBottom: px2dp(20)
  },
  sourceWrap: {
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  qianyue: {
    color: fontColorCoffee
  },
  fooStatus: {
    color: fontColorSecDeepGray
  },
  gooStatus: {
    color: fontColorLightGreen
  },
  zhuangIcon: {
    width: px2dp(36),
    height: px2dp(36),
    marginTop: px2dp(7),
    marginRight: px2dp(20)
  },
  line: {
    backgroundColor: 'transparent',
    width: px2dp(4),
    marginLeft: px2dp(16)
  },
  dash: {
    fontSize: 30,
    backgroundColor: fontColorSecDeepGray,
    width: px2dp(2),
    height: px2dp(4),
    marginTop: px2dp(2),
    marginBottom: px2dp(2)
  },
  adressName: {
    fontSize: px2dp(30),
    fontWeight: 'bold',
    marginRight: px2dp(60),
    marginTop: px2dp(3)
  },
  guigeWrap: {
    backgroundColor: 'transparent',
    marginTop: px2dp(10)
  },
  goo: {
    fontSize: px2dp(26),
    lineHeight: px2dp(38),
    color: '#999896'
  },
  zTime: {
    marginTop: px2dp(10)
  },
  distance: {
    position: 'absolute',
    left: px2dp(-60),
    bottom: px2dp(-60),
    backgroundColor: mainBgColorWhite,
    width: '100%'
  },
  hItem: {
    flexDirection: 'row',
    marginTop: px2dp(6),
    marginBottom: px2dp(6)
  },
  hTitle: {
    paddingBottom: px2dp(20),
    borderBottomWidth: px2dp(2),
    borderBottomColor: '#E6E3E1',
    marginBottom: px2dp(20)
  },
  botTab: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: '100%',
    height: 94,
    flexDirection: 'row',
    backgroundColor: '#fff',
    padding: 16,
    borderTopColor: '#e4e4e2',
    borderWidth: px2dp(0.5)
  },
  btn1: {
    width: 120,
    height: 40,
    borderRadius: 12,
    backgroundColor: 'rgba(186,145,74,1)',
  },
  btnText: {
    textAlign: 'center',
    lineHeight: 40,
    color: '#fff',
    fontSize: 16,
  },
  bot: {
    height: px2dp(34),
    width: '100%'
  },
  itemLabel: {
    color: '#999796',
    fontSize: px2wp(12)
  },
  itemValue: {
    flex: 1,
    textAlign: 'right',
    color: '#666562',
    fontSize: px2wp(12)
  },
  carLongWrap: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  },
  carLongValue: {
    textAlign: 'right',
    color: '#666562',
    fontSize: px2wp(12)
  }

});